@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// $w 宽| $h 高| $bg 背景| $tBr 块圆角度 $tBg 块背景
@mixin scrollBar($w:6px,$h:6px,$tBr:20px,
  $bg:#d3dce6,$tBg:#99a9bf, $tHbg: #409eff) {
    
  &::-webkit-scrollbar-track-piece {
    background: $bg;
  }
  &::-webkit-scrollbar {
    width: $w;
    height: $h;
  }
  &::-webkit-scrollbar-thumb {
    background: $tBg;
    border-radius: $tBr;
    @if $tHbg {
      &:hover{
        background: $tHbg;
      }
    }
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

// 滚动条-样式
@mixin c-scroll($h: 20em, $ch: 10px, $cw: 10px){
  max-height: $h;
  overflow: auto;
  &::-webkit-scrollbar {/*滚动条整体样式*/
    width: $ch;     /*高宽分别对应横竖滚动条的尺寸*/
    height: $cw;
    background-color: #F5F5F5;
  }
  &::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
  }
  &::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 5px;
    background: rgba(0,0,0,0.1);
  }
}

// 主体容器-样式
@mixin warp($minH: null, $b: null, $topH: 95px,
  $h: null, $mar: 10px, $pad: null) {
  position: relative;
  margin: $mar;

  @if $b {
    @if $b == 1 {
      border: 1px solid #dadada;
    } @else {
      border: $b;
    }
  }
  @if $h {
    height: $h;
  } @else if $h == 1 {
    height: calc(100vh - #{$topH} - (#{$mar} * 2) );
  } @else {
    @if $minH {
      min-height: $minH;
    } @else {
      @if $mar == 0 {
        min-height: calc(100vh - #{$topH})
      } @else {
        min-height: calc(100vh - #{$topH} - (#{$mar} * 2) );
      }
    }
  }
  @if $pad {
    padding: $pad;
  }
}

